<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <!-- 上来初始化的时候不要判断，添加 :immediate = "false" -->
        <ArticleItem
          v-for="obj in list"
          :key="obj.art_id"
          :artObj="obj"
          @dislikeEV="dislikeFn"
          @reportEV="reportFn"
          @click.native="detailFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
    <!-- 文章列表 -->
  </div>
</template>

<script>
// 问题: 网页刚打开的时候，created 里面的请求和 onLoad 里请求同时放，请求的都是最新的数据
// onLoad 里面 2次一模一样的数据合并，数据重复，key重复了，所以开始不要执行 onLoad函数，会判断的原因：父节点没有高度，刚来数据还没有回来就触底了
// 或者在 onLoad里面加上一个数组长度的判断
import ArticleItem from "../../../components/ArticleItem.vue";
import { getAllArticleListAPI, dislikeArticleAPI,reportArticleAPI } from "@/api";
import { Notify } from "vant";
export default {
  name: "ArticleList",
  props: {
    channelId: Number,

    // list: Array //文章列表数组
  },
  data() {
    return {
      list: [],
      //loading 和finished 控制加载状态
      loading: false,
      finished: false,
      theTime: new Date().getTime(), //用于分页
      isLoading: false, //顶部下拉刷新
    };
  },
  async created() {
    const res = await getAllArticleListAPI({
      channel_id: this.channelId,
      timestamp: this.theTime,
    });
    this.list = res.data.data.results;
    this.theTime = res.data.data.pre_timestamp;
  },
  methods: {
    //封装网络请求的方法
    async getArticleListFn() {
      const res = await getAllArticleListAPI({
        channel_id: this.channelId,
        timestamp: this.theTime,
      });

      this.list = [...this.list,...res.data.data.results]; //将新老数据进行合并
      this.theTime = res.data.data.pre_timestamp; //将上次内容最后的时候 赋值给theTime 进行下次网络请求的时候进行调用

      //如果不关闭，一直是加载中的状态，下次就不会触发 onload的状态
      //本次回来的数据是最后的，没有下一段数据了，为空的时候，结束
      //使用null的原因是因为这样开始和结尾都能进行判断
      this.loading = false;
      if (res.data.data.results.length === null) {
        this.finished = true;
        return;
      }
      this.isLoading = false;
      //顶部的加载状态要改为false
    },

    //在下拉刷新的时候，触发函数，发送请求，将上一次内容的最后的时间，给这次的调用的函数
    //给传递过来的数据进行合并，并且在将时间刷新
    async onLoad() {
      if (this.list.length === null) {
        this.loading = false
        return
      }
      this.getArticleListFn();
    },
    async onRefresh() {
      //下拉刷新时，先清空列表，和当前的时间参数，再重新发起网络请求
      this.list = [];
      this.theTime = new Date().getTime();

      this.getArticleListFn();
    },
    //反馈不感兴趣
    async dislikeFn(id) {
      await dislikeArticleAPI({
        artId: id,
      });
      Notify({ type: "success", message: "反馈成功" });
    },
    //反馈-垃圾内容
    async reportFn(id,value) {
      await reportArticleAPI({
        artId: id,
        type: value,
      });
      Notify({ type: "success", message: "反馈成功" });
    },
    //点击 文章，查看详情
    detailFn (art_id) {
      this.$router.push(`/articledetail?art_id=${art_id}`)
    }
    
  },

  components: {
    ArticleItem,
  },
};
</script>
